<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="origin-when-cross-origin">
    <meta name="description"
        content="​ 小程序基础 小程序构成 项目结构 pages # 用来存放页面 utils # 用来存放工具类 app.js # 小程序的入口 app.json # 小程序的配置文件 app.wxss # 小程序">
    <meta property="og:description"
        content="​ 小程序基础 小程序构成 项目结构 pages # 用来存放页面 utils # 用来存放工具类 app.js # 小程序的入口 app.json # 小程序的配置文件 app.wxss # 小程序">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>小程序 - rain_sparse - 博客园</title>
    <link id="favicon" rel="shortcut icon" href="//common.cnblogs.com/favicon.svg" type="image/svg+xml">

    <style>
        :not(.cnblogs_code):not(.cnblogs_Highlighter)>pre:not([class*="language-"]):not([highlighted]):not(.hljs):not([class*="brush:"]) {
            background: rgb(40, 44, 52);
            padding: 6.5px;
            border: 0px none rgb(171, 178, 191);
            border-radius: 0px;
            border-color: transparent;
            color: rgb(171, 178, 191);
            font-family: monospace;
        }

        :not(.cnblogs_code):not(.cnblogs_Highlighter)>pre:not([highlighted]):not([class*="brush:"]) code:not(.hljs) {
            background: rgb(40, 44, 52) !important;
            border-color: transparent !important;
        }
    </style>
    <link rel="stylesheet" href="/css/blog-common.min.css?v=ziy-2O5j5kFcvvVKY7WfT_FUAErbfjcRs5DcGf1r4OQ">

    <link id="MainCss" rel="stylesheet"
        href="/skins/darkgreentrip/bundle-darkgreentrip.min.css?v=eoZATbPKwJCL5eWVDTQIYC6CIxJPcFz191dkzN2tSyQ">
    <link id="highlighter-theme-atom-one-dark" type="text/css" rel="stylesheet"
        href="/css/hljs/atom-one-dark.css?v=k5IP6hFowt2ISQDOHTuCLFciixzxZ_8_qYTlEvTQ6CI">

    <link id="mobile-style" media="only screen and (max-width: 767px)" type="text/css" rel="stylesheet"
        href="/skins/darkgreentrip/bundle-darkgreentrip-mobile.min.css?v=F4bQouaa1ue8Yt9KfWoEgvexf5j9KhvpPYBL7UVjznA">



    <link type="application/rss+xml" rel="alternate" href="https://www.cnblogs.com/rain-sparse/rss">
    <link type="application/rsd+xml" rel="EditURI" href="https://www.cnblogs.com/rain-sparse/rsd.xml">
    <link type="application/wlwmanifest+xml" rel="wlwmanifest"
        href="https://www.cnblogs.com/rain-sparse/wlwmanifest.xml">
    <script>
        var currentBlogId = 663943;
        var currentBlogApp = 'rain-sparse';
        var isLogined = true;
        var isBlogOwner = true;
        var skinName = 'darkgreentrip';
        var visitorUserId = '4ea5c7e3-75e3-471c-1bdb-08d8c8014cc2';
        var hasCustomScript = true;
        try {
            if (hasCustomScript && document.referrer && document.referrer.indexOf('baidu.com') >= 0) {
                Object.defineProperty(document, 'referrer', { value: '' });
                Object.defineProperty(Document.prototype, 'referrer', { get: function () { return ''; } });
            }
        } catch (error) { }
        window.cb_enable_mathjax = false;
        window.mathEngine = 0;
        window.codeHighlightEngine = 1;
        window.enableCodeLineNumber = true;
        window.codeHighlightTheme = 'atom-one-dark';
        window.isDarkCodeHighlightTheme = true;
        window.isDisableCodeHighlighter = false;
    </script>
    <script>
        var currentPostDateAdded = '2022-06-16 01:06';
    </script>
    <script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
    <script src="https://www.cnblogs.com/js/blog-common.min.js?v=WAkc3VT-pBUNYkfERqmCIhAdBI1iiDgKmlEUu6aZ3bk"></script>
    <style>
        .medium-zoom-overlay {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0;
            transition: opacity 300ms;
            will-change: opacity;
        }

        .medium-zoom--opened .medium-zoom-overlay {
            cursor: pointer;
            cursor: zoom-out;
            opacity: 1;
        }

        .medium-zoom-image {
            cursor: pointer;
            cursor: zoom-in;
            /*
    The `transition` is marked as "!important" for the animation to happen
    even though it's overriden by another inline `transition` style attribute.

    This is problematic with frameworks that generate inline styles on their
    images (e.g. Gatsby).

    See https://github.com/francoischalifour/medium-zoom/issues/110
   */
            transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
        }

        .medium-zoom-image--hidden {
            visibility: hidden;
        }

        .medium-zoom-image--opened {
            position: relative;
            cursor: pointer;
            cursor: zoom-out;
            will-change: transform;
        }
    </style>
    <script id="hljs-script" src="https://common.cnblogs.com/highlight/11.4.0/highlight.min.js" type="text/javascript"
        defer=""></script>

    <script id="hljs-line-numbers" src="https://common.cnblogs.com/scripts/highlightjs-line-numbers.min.js"
        type="text/javascript" defer=""></script>
    <style type="text/css">
        .hljs-ln {
            border-collapse: collapse
        }

        .hljs-ln td {
            padding: 0
        }

        .hljs-ln-n:before {
            content: attr(data-line-number)
        }
    </style>
    <style>
        hcfy-result.__hcfy__result__loaded__.__hcfy__result__both__ {
            border: 1px dotted
        }
    </style>
    <!-- 添加csss -->
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/article.css">
    <link rel="stylesheet" href="./css/adaptation.css">
</head>

<body class="skin-darkgreentrip has-navbar hljs-engine">
    <a name="top"></a>
    <div id="top_nav" class="navbar forpc">
        <nav id="nav_main" class="navbar-main">
            <ul id="nav_left" class="navbar-list navbar-left">
                <li class="navbar-branding">
                    <a href="https://www.cnblogs.com/" title="开发者的网上家园" role="banner">
                        <img src="https://www.cnblogs.com/images/logo.svg?v=R9M0WmLAIPVydmdzE2keuvnjl-bPR7_35oHqtiBzGsM"
                            alt="博客园Logo">
                    </a>
                </li>
                <li>
                    <a href="/" onclick="countClicks('skin-navbar-sitehome')">首页</a>
                </li>
                <li>
                    <a href="https://news.cnblogs.com/" onclick="countClicks('nav', 'skin-navbar-news')">新闻</a>
                </li>
                <li>
                    <a href="https://q.cnblogs.com/" onclick="countClicks('nav', 'skin-navbar-q')">博问</a>
                </li>
                <li>
                    <a id="nav_brandzone" href="https://brands.cnblogs.com/"
                        onclick="countClicks('nav', 'skin-navbar-brands')">专区</a>
                </li>
                <li>
                    <a href="https://ing.cnblogs.com/" onclick="countClicks('nav', 'skin-navbar-ing')">闪存</a>
                </li>
                <li>
                    <a href="https://edu.cnblogs.com/" onclick="countClicks('nav', 'skin-navbar-edu')">班级</a>
                </li>
            </ul>
            <ul id="nav_right" class="navbar-list navbar-right">
                <li>
                    <form id="zzk_search" class="navbar-search" action="https://zzk.cnblogs.com/s" method="get"
                        role="search">
                        <input name="w" id="zzk_search_input" placeholder="代码改变世界" type="search" tabindex="3">
                        <button type="submit" id="zzk_search_button">
                            <img src="https://www.cnblogs.com/images/aggsite/search.svg" alt="搜索">
                        </button>
                    </form>
                </li>
                <li id="navbar_login_status" class="navbar-list">
                    <a class="navbar-user-info navbar-blog" href="https://i.cnblogs.com/EditPosts.aspx?opt=1" alt="写随笔"
                        title="写随笔" style="display: inline;">
                        <img id="new_post_icon" class="navbar-icon"
                            src="https://www.cnblogs.com/images/aggsite/newpost.svg" alt="写随笔">
                    </a>
                    <a id="navblog-myblog-icon" class="navbar-user-info navbar-blog"
                        href="https://www.cnblogs.com/rain-sparse/" alt="我的博客" title="我的博客" style="display: inline;">
                        <img id="myblog_icon" class="navbar-icon"
                            src="https://www.cnblogs.com/images/aggsite/myblog.svg" alt="我的博客">
                    </a>
                    <a class="navbar-user-info navbar-message navbar-icon-wrapper" href="https://msg.cnblogs.com/"
                        alt="短消息" title="短消息" style="display: inline;">
                        <img id="msg_icon" class="navbar-icon"
                            src="https://www.cnblogs.com/images/aggsite/message.svg?v=J0WS2P2iPgaIVgXxcAhliw4AFZIpaTWxtdoNAv9eiCA"
                            alt="短消息">
                        <span id="msg_count" style="display: none"></span>
                    </a>
                    <a id="navbar_lite_mode_indicator" data-current-page="blog" style="display: none"
                        href="javascript:void(0)" alt="简洁模式" title="简洁模式启用，您在访问他人博客时会使用简洁款皮肤展示">
                        <img class="navbar-icon" src="https://www.cnblogs.com/images/aggsite/lite-mode-on.svg"
                            alt="简洁模式">
                    </a>
                    <div id="user_info" class="navbar-user-info dropdown" style="display: block;">
                        <a class="dropdown-button" href="https://home.cnblogs.com/u/rain-sparse">
                            <img id="user_icon" class="navbar-avatar"
                                src="//pic.cnblogs.com/face/2299071/20210206002934.png" alt="用户头像">
                        </a>
                        <div class="dropdown-menu">
                            <a id="navblog-myblog-text" href="https://www.cnblogs.com/rain-sparse/">我的博客</a>
                            <a href="https://home.cnblogs.com/">我的园子</a>
                            <a href="https://account.cnblogs.com/settings/account">账号设置</a>
                            <a href="javascript:void(0)" id="navbar_lite_mode_toggle" title="简洁模式会使用简洁款皮肤显示所有博客">
                                简洁模式 <img id="navbar_lite_mode_on"
                                    src="https://www.cnblogs.com/images/lite-mode-check.svg" class="hide"
                                    style="display: none;"><span id="navbar_lite_mode_spinner" class="hide">...</span>
                            </a>
                            <a href="javascript:void(0)" onclick="account.logout();">退出登录</a>
                        </div>
                    </div>
                    <a class="navbar-anonymous" href="https://account.cnblogs.com/signup" style="display: none;">注册</a>
                    <a class="navbar-anonymous" href="javascript:void(0);" onclick="account.login()"
                        style="display: none;">登录</a>
                </li>
            </ul>
        </nav>
    </div>

    <div id="page_begin_html">
        <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8" defer></script>
    </div>

    <!--done-->
    <div id="home">
        <div id="header">
            <div id="blogTitle">
                <a id="lnkBlogLogo" href="https://www.cnblogs.com/rain-sparse/"><img id="blogLogo"
                        src="https://www.cnblogs.com/skins/custom/images/logo.gif" alt="返回主页"></a>

                <!--done-->
                <h1><a id="Header1_HeaderTitle" class="headermaintitle HeaderMainTitle"
                        href="https://www.cnblogs.com/rain-sparse/">rain_sparse</a>
                </h1>
                <h2></h2>





            </div>
            <!--end: blogTitle 博客的标题和副标题 -->
            <div id="navigator">

                <ul id="navList">
                    <li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">
                            博客园</a>
                    </li>
                    <li>
                        <a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/rain-sparse/">
                            首页</a>
                    </li>
                    <li>

                        <a id="blog_nav_newpost" class="menu" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">
                            新随笔</a>
                    </li>
                    <li>
                        <a id="blog_nav_contact" class="menu" href="https://msg.cnblogs.com/send/rain_sparse">
                            联系</a>
                    </li>
                    <li>
                        <a id="blog_nav_rss" class="menu" href="javascript:void(0)"
                            data-rss="https://www.cnblogs.com/rain-sparse/rss/">订阅</a>
                        <!--<partial name="./Shared/_XmlLink.cshtml" model="Model" /></li>-->
                    </li>
                    <li>
                        <a id="blog_nav_admin" class="menu" href="https://i.cnblogs.com/">
                            管理</a>
                    </li>
                </ul>


                <div class="blogStats">
                    <span id="stats_post_count">随笔 - 13&nbsp; </span>
                    <span id="stats_article_count">文章 - 3&nbsp; </span>
                    <span id="stats-comment_count">评论 - 0&nbsp; </span>
                    <span id="stats-total-view-count">阅读 -
                        <span title="总阅读数: 208">
                            208</span></span>

                </div>
                <!--end: blogStats -->
            </div>
            <!--end: navigator 博客导航栏 -->
        </div>
        <!--end: header 头部 -->
        <div id="main">
            <div id="mainContent">
                <div class="forFlow">
                    <div id="post_detail">
                        <!--done-->
                        <div id="topics">
                            <div class="post">
                                <h1 class="postTitle">

                                    <a id="cb_post_title_url" class="postTitle2 vertical-middle"
                                        href="https://www.cnblogs.com/rain-sparse/p/16380520.html">
                                        <span role="heading" aria-level="2">小程序</span>

                                    </a><button class="cnblogs-toc-button" title="显示目录导航"
                                        aria-expanded="false"></button>

                                </h1>
                                <div class="clear"></div>
                                <div class="postBody">
                                    <div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown">
                                        <p>​</p>
                                        <p><code>123</code></p>
                                        <h1 id="小程序基础">小程序基础<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h1>
                                        <h2 id="小程序构成">小程序构成<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h2>
                                        <h3 id="项目结构">项目结构<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-bash highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">pages <span class="hljs-comment"># 用来存放页面</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">utils  <span class="hljs-comment"># 用来存放工具类</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">app.js <span class="hljs-comment"># 小程序的入口</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">app.json <span class="hljs-comment"># 小程序的配置文件</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">app.wxss <span class="hljs-comment"># 小程序的全局样式</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">project.config.json <span class="hljs-comment"># 小程序的项目配置小程序的项目配置小程序的项目配置小程序的项目配置小程序的项目配置小程序的项目配置小程序的项目配置小程序的项目配置小程序的项目配置小程序的项目配置小程序的项目配置小程序的项目配置小程序的项目配置</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">sitemap.json <span class="hljs-comment"># 是否允许被微信索引</span></td></tr></tbody></table></code></pre>
                                        <h3 id="页面组成">页面组成<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-bash highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment"># 每个页面由四个文件组成</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">.js <span class="hljs-comment"># 页面的数据 处理函数</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">.json <span class="hljs-comment"># 页面的配置</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">.wxml <span class="hljs-comment"># 页面结构</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">.wxss <span class="hljs-comment"># 页面样式</span></td></tr></tbody></table></code></pre>
                                        <h3 id="wxml和html">WXML和HTML<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>标签不同</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-bash highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">HTML(div, sapn, img,a)</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">WXML(view,text,image,navigator)</td></tr></tbody></table></code></pre>
                                        <blockquote>
                                            <p>属性节点不同</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-tag">&lt;<span class="hljs-name">navigator</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/pages/home/home"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">navigator</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <blockquote>
                                            <p>提供类似vue的模板</p>
                                        </blockquote>
                                        <ul>
                                            <li>数据绑定</li>
                                            <li>列表渲染</li>
                                            <li>条件渲染</li>
                                        </ul>
                                        <h3 id="wxss-和-css">WXSS 和 CSS<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>新增rpx尺寸单位</p>
                                        </blockquote>
                                        <ul>
                                            <li>在不同大小的小程序上会自动进行计算</li>
                                        </ul>
                                        <blockquote>
                                            <p>提供全局的样式和局部样式</p>
                                        </blockquote>
                                        <ul>
                                            <li>全局 app.wxss</li>
                                            <li>局部 页面文件的 .wxss</li>
                                        </ul>
                                        <blockquote>
                                            <p>仅支持部分选择器</p>
                                        </blockquote>
                                        <ul>
                                            <li>.class 和 #id</li>
                                            <li>element</li>
                                            <li>并集选择器 后代选择器</li>
                                            <li>:: after 和 :: before</li>
                                        </ul>
                                        <h3 id="通讯模式">通讯模式<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>渲染层和逻辑层之间的通信</p>
                                        </blockquote>
                                        <ul>
                                            <li>由微信客户端进行转发</li>
                                        </ul>
                                        <blockquote>
                                            <p>逻辑层和第三方服务器之间的通讯</p>
                                        </blockquote>
                                        <ul>
                                            <li>由微信客户端进行转发</li>
                                        </ul>
                                        <h3 id="小程序组件">小程序组件<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <h4 id="view">view<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h4>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-php+HTML highlighter-hljs hljs language-php hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">&lt;!--类似div--&gt;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">&lt;view&gt;&lt;/view&gt;</td></tr></tbody></table></code></pre>
                                        <h4 id="scroll-view滑动"><strong>scroll-view滑动</strong><button
                                                class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h4>
                                        <blockquote>
                                            <p>横向滑动</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">scroll-view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"main"</span> <span class="hljs-attr">scroll-x</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">    <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">    <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">    <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-tag">&lt;/<span class="hljs-name">scroll-view</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-css highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-selector-class">.main</span>{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-attribute">height</span>: <span class="hljs-number">100</span>rpx;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-attribute">width</span>: <span class="hljs-number">100</span>rpx;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  <span class="hljs-attribute">white-space</span>: nowrap;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">}</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"><span class="hljs-selector-class">.main</span> view{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">  <span class="hljs-attribute">display</span>: inline-block; </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">  <span class="hljs-attribute">height</span>: <span class="hljs-number">100</span>rpx;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">  <span class="hljs-attribute">width</span>: <span class="hljs-number">100</span>rpx;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">  <span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">35</span>, <span class="hljs-number">190</span>, <span class="hljs-number">21</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11">}</td></tr></tbody></table></code></pre>
                                        <blockquote>
                                            <p>竖向滑动</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">scroll-view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"main"</span> <span class="hljs-attr">scroll-y</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">    <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">    <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">    <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-tag">&lt;/<span class="hljs-name">scroll-view</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-css highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-selector-class">.main</span>{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-attribute">height</span>: <span class="hljs-number">100</span>rpx;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-attribute">width</span>: <span class="hljs-number">100</span>rpx;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  <span class="hljs-comment">/* white-space: nowrap; */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">}</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"><span class="hljs-selector-class">.main</span> view{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">  <span class="hljs-comment">/* display: inline-block; */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">  <span class="hljs-attribute">height</span>: <span class="hljs-number">100</span>rpx;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">  <span class="hljs-attribute">width</span>: <span class="hljs-number">100</span>rpx;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">  <span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">35</span>, <span class="hljs-number">190</span>, <span class="hljs-number">21</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11">}</td></tr></tbody></table></code></pre>
                                        <h4 id="swiper和swiper-item-轮播图">swiper和swiper-item 轮播图<button
                                                class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h4>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">swiper</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-tag">&lt;<span class="hljs-name">swiper-item</span>&gt;</span>A<span class="hljs-tag">&lt;/<span class="hljs-name">swiper-item</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-tag">&lt;<span class="hljs-name">swiper-item</span>&gt;</span>B<span class="hljs-tag">&lt;/<span class="hljs-name">swiper-item</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  <span class="hljs-tag">&lt;<span class="hljs-name">swiper-item</span>&gt;</span>C<span class="hljs-tag">&lt;/<span class="hljs-name">swiper-item</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-tag">&lt;/<span class="hljs-name">swiper</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-bash highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment"># 属性</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">indicator-dots <span class="hljs-comment"># 是否显示点 默认false</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">indicator-color <span class="hljs-comment"># 指示点的颜色</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">indicator-active-color <span class="hljs-comment"># 选中点的指示颜色</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">autopay <span class="hljs-comment"># 是否自动切换</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">interval <span class="hljs-comment">#  时间间隔</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">circular <span class="hljs-comment"># 是否衔接滑动</span></td></tr></tbody></table></code></pre>
                                        <h4 id="text-文本">text 文本<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h4>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment">&lt;!--selectable 长摁选中--&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">selectable</span>&gt;</span>1393939393<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <h4 id="rich-text-将渲染html字符串">rich-text 将渲染html字符串<button
                                                class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h4>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">rich-text</span> <span class="hljs-attr">nodes</span>=<span class="hljs-string">"&lt;h1&gt;qwe&lt;/h1&gt;"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">rich-text</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <h3 id="小程序api">小程序API<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <h4 id="监听事件api">监听事件API<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h4>
                                        <blockquote>
                                            <p>以on开头,来监听某些事件的触发</p>
                                        </blockquote>
                                        <p>wx 类似window</p>
                                        <p>wx.onWindowResize(function) 监听窗口是否变化</p>
                                        <h4 id="同步api">同步API<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h4>
                                        <blockquote>
                                            <p>以sync结尾的API</p>
                                            <p>执行的结果可以通过函数返回直接获取</p>
                                        </blockquote>
                                        <h4 id="异步api">异步API<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h4>
                                        <blockquote>
                                            <p>需要通过success ,fail , complete接收调用的结果</p>
                                        </blockquote>
                                        <h2 id="wxml">WXML<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h2>
                                        <h3 id="数据绑定">数据绑定<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <p>.js里定义数据</p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-title class_">Page</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-comment">   * 页面的初始数据</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">  <span class="hljs-attr">data</span>: {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">    <span class="hljs-attr">name</span>: <span class="hljs-string">'giao'</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">    <span class="hljs-attr">age</span>: <span class="hljs-number">18</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">})</td></tr></tbody></table></code></pre>
                                        <p>.wxml 直接用</p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{name}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{age}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <h3 id="事件绑定">事件绑定<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>渲染层到逻辑层的通讯方式</p>
                                            <p>可以将用户在渲染层的行为通过微信客户端反馈到逻辑层</p>
                                        </blockquote>
                                        <p><strong>常用</strong></p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-bash highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">tap <span class="hljs-comment"># 触摸(类似点击)</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">input <span class="hljs-comment"># 输入框事件</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">change  <span class="hljs-comment"># 状态改变</span></td></tr></tbody></table></code></pre>
                                        <h3 id="事件对象的属性列表">事件对象的属性列表<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>触发回调函数的时候, 会收到事件对象event</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-bash highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-built_in">type</span> <span class="hljs-comment"># 事件类型</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">target <span class="hljs-comment"># 触发事件的组件</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">currentTarget <span class="hljs-comment"># 当前事件所绑定的组件</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">detail <span class="hljs-comment"># 额外的信息</span></td></tr></tbody></table></code></pre>
                                        <h3 id="bindtap-触摸事件">bindtap 触摸事件<button class="cnblogs-toc-button"
                                                title="显示目录导航" aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-title class_">Page</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-comment">   * 页面的初始数据</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">  <span class="hljs-attr">data</span>: {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">    <span class="hljs-attr">count</span>: <span class="hljs-number">0</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9"><span class="hljs-comment">   * 触摸函数</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11">  <span class="hljs-title function_">countAdd</span>(<span class="hljs-params">e</span>){</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12">    <span class="hljs-comment">// 通过e.target.dataset 获取参数</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e.<span class="hljs-property">target</span>.<span class="hljs-property">dataset</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">    <span class="hljs-comment">// 修改data的值</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15">    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="16"><div class="hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="16">      <span class="hljs-attr">count</span>: <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>.<span class="hljs-property">count</span> + <span class="hljs-number">1</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="17"><div class="hljs-ln-n" data-line-number="17"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="17">    })</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="18"><div class="hljs-ln-n" data-line-number="18"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="18">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="19"><div class="hljs-ln-n" data-line-number="19"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="19">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="20"><div class="hljs-ln-n" data-line-number="20"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="20"><span class="hljs-comment">   * 输入框改变</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="21"><div class="hljs-ln-n" data-line-number="21"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="21"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="22"><div class="hljs-ln-n" data-line-number="22"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="22">  <span class="hljs-title function_">onInputFn</span>(<span class="hljs-params">e</span>){</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="23"><div class="hljs-ln-n" data-line-number="23"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="23">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="24"><div class="hljs-ln-n" data-line-number="24"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="24">    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="25"><div class="hljs-ln-n" data-line-number="25"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="25">      <span class="hljs-attr">msg</span>: e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="26"><div class="hljs-ln-n" data-line-number="26"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="26">    })</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="27"><div class="hljs-ln-n" data-line-number="27"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="27">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="28"><div class="hljs-ln-n" data-line-number="28"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="28">})</td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment">&lt;!-- bindtap不能传值 需要通过 data-名字 --&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"countAdd"</span> <span class="hljs-attr">data-num</span>=<span class="hljs-string">"{{1}}"</span>&gt;</span>+1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{msg}}"</span> <span class="hljs-attr">bindinput</span>=<span class="hljs-string">"onInputFn"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> /&gt;</span></td></tr></tbody></table></code></pre>
                                        <h3 id="条件渲染">条件渲染<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">"{{sex === 1}}"</span>&gt;</span>男<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">wx:elif</span>=<span class="hljs-string">"{{sex === 2}}"</span>&gt;</span>女<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">wx:else</span>&gt;</span>妖<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <p><strong>
                                                <block></block>
                                            </strong></p>
                                        <blockquote>
                                            <p>包裹性质的组件 ,不会在页面渲染, 可以控制多个组件显示隐藏</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">block</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">"{{false}}"</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>block包裹<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>block包裹<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-tag">&lt;/<span class="hljs-name">block</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <p><strong>hidden</strong></p>
                                        <blockquote>
                                            <p>隐藏元素</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">"{{true}}"</span>&gt;</span>block包裹<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <h4 id="wxif和hidden">wx:if和hidden<button class="cnblogs-toc-button"
                                                title="显示目录导航" aria-expanded="false"></button></h4>
                                        <ul>
                                            <li>wx:if 是动态销毁</li>
                                            <li>hidden 是隐藏</li>
                                        </ul>
                                        <h3 id="列表渲染">列表渲染<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment">&lt;!-- wx:key 不用{{}} --&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">"{{arr}}"</span> <span class="hljs-attr">wx:key</span>=<span class="hljs-string">"item"</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  {{item}}</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <h2 id="小程序配置">小程序配置<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h2>
                                        <h3 id="全局配置">全局配置<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <h4 id="appjson">app.json<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h4>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-bash highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">pages <span class="hljs-comment"># 所有小程序页面的存路径</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">window <span class="hljs-comment"># 全局设置小程序窗口的外观</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">tabBar <span class="hljs-comment"># 设置小程序底部的tabBar</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">style <span class="hljs-comment"># 是否启用组件样式</span></td></tr></tbody></table></code></pre>
                                        <p><strong>windiw</strong></p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-json highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-attr">"window"</span><span class="hljs-punctuation">:</span><span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  	<span class="hljs-comment">// 下拉刷新时 loading样式</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">    <span class="hljs-attr">"backgroundTextStyle"</span><span class="hljs-punctuation">:</span><span class="hljs-string">"dark"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  	<span class="hljs-comment">// 导航栏背景</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">    <span class="hljs-attr">"navigationBarBackgroundColor"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#345333"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  	<span class="hljs-comment">// 导航栏内容</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">    <span class="hljs-attr">"navigationBarTitleText"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"健康宝"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">  	<span class="hljs-comment">// 导航栏字体颜色</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">    <span class="hljs-attr">"navigationBarTextStyle"</span><span class="hljs-punctuation">:</span><span class="hljs-string">"white"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">  	<span class="hljs-comment">// 开启下拉刷新</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11">    <span class="hljs-attr">"enablePullDownRefresh"</span> <span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12">  	<span class="hljs-comment">// 下拉刷新时 背景</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13">    <span class="hljs-attr">"backgroundColor"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#efefef"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">  	<span class="hljs-comment">// 上拉触底 滚动条距离底部50px 加载数据</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15">  	<span class="hljs-attr">"onReachBottomDistance"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">50</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="16"><div class="hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="16">  <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span></td></tr></tbody></table></code></pre>
                                        <p><strong>tabBar</strong></p>
                                        <blockquote>
                                            <p>用于实现多页面切换, 渲染顶部的时候不显示icon</p>
                                            <p>最少渲染两个, 做多渲染5个</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-json highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-attr">"tabBar"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  	<span class="hljs-comment">// 背景颜色</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">    <span class="hljs-attr">"backgroundColor"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#fff234"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  	<span class="hljs-comment">// 字体颜色</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">    <span class="hljs-attr">"color"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#fff"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  	<span class="hljs-comment">// 边框颜色 black white</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">    <span class="hljs-attr">"borderStyle"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"black"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">  	<span class="hljs-comment">// 配置内容图标</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">    <span class="hljs-attr">"list"</span><span class="hljs-punctuation">:</span><span class="hljs-punctuation">[</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">      <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11">        <span class="hljs-comment">// 路径</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12">        <span class="hljs-attr">"pagePath"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"pages/nav/nav"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13">        <span class="hljs-comment">// 内容</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">        <span class="hljs-attr">"text"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"nav"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15">        <span class="hljs-comment">// 图标</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="16"><div class="hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="16">        <span class="hljs-attr">"iconPath"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"/img/tabs/home.png"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="17"><div class="hljs-ln-n" data-line-number="17"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="17">        <span class="hljs-comment">// 选中图标</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="18"><div class="hljs-ln-n" data-line-number="18"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="18">        <span class="hljs-attr">"selectedIconPath"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"/img/tabs/home-active.png"</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="19"><div class="hljs-ln-n" data-line-number="19"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="19">      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="20"><div class="hljs-ln-n" data-line-number="20"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="20">      <span class="hljs-punctuation">{</span><span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="21"><div class="hljs-ln-n" data-line-number="21"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="21">      <span class="hljs-punctuation">{</span><span class="hljs-punctuation">}</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="22"><div class="hljs-ln-n" data-line-number="22"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="22">    <span class="hljs-punctuation">]</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="23"><div class="hljs-ln-n" data-line-number="23"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="23">  <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span></td></tr></tbody></table></code></pre>
                                        <h3 id="页面配置">页面配置<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>会覆盖全局配置, 跟 window一致</p>
                                        </blockquote>
                                        <h2 id="小程序数据请求">小程序数据请求<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h2>
                                        <p>出于安全考虑, 小程序官方对数据接口的请求做出来两个限制</p>
                                        <ul>
                                            <li>只能请求https类型的接口</li>
                                            <li>必须将接口的域名添加到信任列表</li>
                                        </ul>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">wx.<span class="hljs-title function_">request</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-attr">url</span>:<span class="hljs-string">'url'</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-attr">method</span>: <span class="hljs-string">'get'</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  <span class="hljs-attr">success</span>: <span class="hljs-function">(<span class="hljs-params">res</span>)=&gt;</span> {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(res);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  }</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">})</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">wx.<span class="hljs-title function_">request</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">  <span class="hljs-attr">url</span>:<span class="hljs-string">'url'</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">  <span class="hljs-attr">method</span>: <span class="hljs-string">'post'</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11">  <span class="hljs-attr">data</span>:{},</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12">  <span class="hljs-attr">success</span>: <span class="hljs-function">(<span class="hljs-params">res</span>)=&gt;</span> {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(res);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">  }</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15">})</td></tr></tbody></table></code></pre>
                                        <h2 id="视图与逻辑">视图与逻辑<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h2>
                                        <h3 id="声明式导航">声明式导航<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>页面上声明一个<navigtor>导航组件, 点击跳转</navigtor>
                                            </p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment"><span class="hljs-comment">&lt;!-- </span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-comment">  声明式跳转 </span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-comment">  url="/..."</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-comment">  open-type="switchTab" 跳转配置tabBar</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-comment">--&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"><span class="hljs-tag">&lt;<span class="hljs-name">navigator</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/pages/msg/msg"</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"switchTab"</span>&gt;</span>配置tabBar<span class="hljs-tag">&lt;/<span class="hljs-name">navigator</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8"><span class="hljs-comment"><span class="hljs-comment">&lt;!-- </span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9"><span class="hljs-comment">  声明式跳转 </span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10"><span class="hljs-comment">  url="/..."</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11"><span class="hljs-comment">  open-type="navigate" (可选) 跳转配置没tabBar</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12"><span class="hljs-comment">--&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13"><span class="hljs-tag">&lt;<span class="hljs-name">navigator</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/pages/info/info"</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"navigate"</span>&gt;</span>配置没tabBar<span class="hljs-tag">&lt;/<span class="hljs-name">navigator</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15"><span class="hljs-comment"><span class="hljs-comment">&lt;!-- </span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="16"><div class="hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="16"><span class="hljs-comment">  返回</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="17"><div class="hljs-ln-n" data-line-number="17"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="17"><span class="hljs-comment">  open-type="navigateBack"</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="18"><div class="hljs-ln-n" data-line-number="18"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="18"><span class="hljs-comment">  delta="1" (为一时可以不写)  返回页面数</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="19"><div class="hljs-ln-n" data-line-number="19"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="19"><span class="hljs-comment"> --&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="20"><div class="hljs-ln-n" data-line-number="20"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="20"><span class="hljs-tag">&lt;<span class="hljs-name">navigator</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"navigateBack"</span> <span class="hljs-attr">delta</span>=<span class="hljs-string">"1"</span>&gt;</span>返回<span class="hljs-tag">&lt;/<span class="hljs-name">navigator</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <h4 id="传参">传参<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h4>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment"><span class="hljs-comment">&lt;!--</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-comment">  传参</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-comment">  参数与路径之间使用?分隔</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-comment">  参数键与参数值 用等号</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-comment">  不同参数&amp;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"><span class="hljs-comment"> --&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"><span class="hljs-tag">&lt;<span class="hljs-name">navigator</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/pages/info/info?name=zs&amp;age=18"</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"navigate"</span>&gt;</span>配置没tabBar<span class="hljs-tag">&lt;/<span class="hljs-name">navigator</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <h3 id="编程式导航">编程式导航<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>调用小程序的导航API, 实现跳转</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">wx.<span class="hljs-title function_">switchTab</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-comment">// 路径</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-attr">url</span>:<span class="hljs-string">''</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  <span class="hljs-comment">// 成功</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">  <span class="hljs-attr">success</span>: <span class="hljs-function">() =&gt;</span>{},</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  <span class="hljs-comment">// 失败</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">  <span class="hljs-attr">fail</span>: <span class="hljs-function">()=&gt;</span>{},</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">  <span class="hljs-comment">// 成功失败都会执行</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">  <span class="hljs-attr">complete</span>: <span class="hljs-function">()=&gt;</span>{}</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">})</td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-comment">   * 编程式导航</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-comment">   * 跳转tabBar</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">  <span class="hljs-title function_">onNavigator</span>(<span class="hljs-params"></span>){</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">    wx.<span class="hljs-title function_">switchTab</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">      <span class="hljs-attr">url</span>:<span class="hljs-string">"/pages/msg/msg"</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">    })</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11"><span class="hljs-comment">   * 编程式导航</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12"><span class="hljs-comment">   * 跳转非tabBar</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">  <span class="hljs-title function_">onNavigatorTo</span>(<span class="hljs-params"></span>){</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15">    wx.<span class="hljs-title function_">navigateTo</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="16"><div class="hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="16">      <span class="hljs-attr">url</span>: <span class="hljs-string">'/pages/info/info'</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="17"><div class="hljs-ln-n" data-line-number="17"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="17">    })</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="18"><div class="hljs-ln-n" data-line-number="18"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="18">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="19"><div class="hljs-ln-n" data-line-number="19"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="19">    </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="20"><div class="hljs-ln-n" data-line-number="20"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="20">    </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="21"><div class="hljs-ln-n" data-line-number="21"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="21">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="22"><div class="hljs-ln-n" data-line-number="22"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="22"><span class="hljs-comment">   * 返回</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="23"><div class="hljs-ln-n" data-line-number="23"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="23"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="24"><div class="hljs-ln-n" data-line-number="24"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="24">  <span class="hljs-title function_">onBack</span>(<span class="hljs-params"></span>){</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="25"><div class="hljs-ln-n" data-line-number="25"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="25">    wx.<span class="hljs-title function_">navigateBack</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="26"><div class="hljs-ln-n" data-line-number="26"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="26">      <span class="hljs-comment">// 可选不写就是1</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="27"><div class="hljs-ln-n" data-line-number="27"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="27">      <span class="hljs-attr">delta</span>: <span class="hljs-number">1</span>, </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="28"><div class="hljs-ln-n" data-line-number="28"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="28">    })</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="29"><div class="hljs-ln-n" data-line-number="29"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="29">  },</td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment">&lt;!-- 编程式跳转 --&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"onNavigator"</span>&gt;</span>编程式跳转tabBar<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"onNavigatorTo"</span>&gt;</span>编程式跳转非tabBar<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-comment">&lt;!--返回--&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"onBack"</span>&gt;</span>返回<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"> </td></tr></tbody></table></code></pre>
                                        <h4 id="传参-1">传参<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h4>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-comment"> * 编程式导航</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-comment"> * 跳转非tabBar</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-comment"> */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-title function_">onNavigatorTo</span>(<span class="hljs-params"></span>){</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  wx.<span class="hljs-title function_">navigateTo</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">    <span class="hljs-attr">url</span>: <span class="hljs-string">'/pages/info/info?name=zs&amp;age=18'</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">  })</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">},</td></tr></tbody></table></code></pre>
                                        <h3 id="接收参数">接收参数<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-comment"> * 生命周期函数--监听页面加载</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-comment"> */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-title function_">onLoad</span>(<span class="hljs-params">options</span>) {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">  <span class="hljs-comment">// 传递的参数</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(options);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">  <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">    <span class="hljs-attr">query</span>: options</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">  })</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">},</td></tr></tbody></table></code></pre>
                                        <h3 id="下拉刷新">下拉刷新<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>全局 app.json window节点 enablePullDownRefresh: ture</p>
                                        </blockquote>
                                        <blockquote>
                                            <p>局部 .json enablePullDownRefresh: true</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-comment">   * 页面相关事件处理函数--监听用户下拉动作</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  <span class="hljs-title function_">onPullDownRefresh</span>(<span class="hljs-params"></span>) {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">      <span class="hljs-attr">count</span>: <span class="hljs-number">0</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">    })</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">    <span class="hljs-comment">// 关闭下拉刷新</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">    wx.<span class="hljs-title function_">stopPullDownRefresh</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">      <span class="hljs-attr">success</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(res);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12">      },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13">    })</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">  },</td></tr></tbody></table></code></pre>
                                        <h3 id="上拉触底">上拉触底<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>"onReachBottomDistance": 50 距离底部50</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-comment">   * 页面上拉触底事件的处理函数</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  <span class="hljs-title function_">onReachBottom</span>(<span class="hljs-params"></span>) {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">getColor</span>()</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  },</td></tr></tbody></table></code></pre>
                                        <h3 id="loading显示隐藏">loading显示隐藏<button class="cnblogs-toc-button"
                                                title="显示目录导航" aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">wx.<span class="hljs-title function_">showLoading</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-attr">title</span>: <span class="hljs-string">'加载'</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">})</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">wx.<span class="hljs-title function_">hideLoading</span>()</td></tr></tbody></table></code></pre>
                                        <h2 id="生命周期">生命周期<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h2>
                                        <h3 id="应用生命周期">应用生命周期<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <p>特指小程序从启动 运行 销毁的过程</p>
                                        <h3 id="页面生命周期">页面生命周期<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <p>特指小程序, 每个页面的加载 渲染 销毁</p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-comment">   * 生命周期函数--监听页面加载</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-comment">   * 只调用一次</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-comment">   * options 当前页面获取的传参</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  <span class="hljs-title function_">onLoad</span>(<span class="hljs-params">options</span>) {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11"><span class="hljs-comment">   * 生命周期函数--监听页面初次渲染完成</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12"><span class="hljs-comment">   * 可以进行交互</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">  <span class="hljs-title function_">onReady</span>(<span class="hljs-params"></span>) {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="16"><div class="hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="16">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="17"><div class="hljs-ln-n" data-line-number="17"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="17"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="18"><div class="hljs-ln-n" data-line-number="18"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="18">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="19"><div class="hljs-ln-n" data-line-number="19"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="19"><span class="hljs-comment">   * 生命周期函数--监听页面显示</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="20"><div class="hljs-ln-n" data-line-number="20"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="20"><span class="hljs-comment">   * 进入前台</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="21"><div class="hljs-ln-n" data-line-number="21"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="21"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="22"><div class="hljs-ln-n" data-line-number="22"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="22">  <span class="hljs-title function_">onShow</span>(<span class="hljs-params"></span>) {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="23"><div class="hljs-ln-n" data-line-number="23"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="23"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="24"><div class="hljs-ln-n" data-line-number="24"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="24">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="25"><div class="hljs-ln-n" data-line-number="25"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="25"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="26"><div class="hljs-ln-n" data-line-number="26"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="26">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="27"><div class="hljs-ln-n" data-line-number="27"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="27"><span class="hljs-comment">   * 生命周期函数--监听页面隐藏</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="28"><div class="hljs-ln-n" data-line-number="28"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="28"><span class="hljs-comment">   * 切入后台</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="29"><div class="hljs-ln-n" data-line-number="29"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="29"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="30"><div class="hljs-ln-n" data-line-number="30"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="30">  <span class="hljs-title function_">onHide</span>(<span class="hljs-params"></span>) {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="31"><div class="hljs-ln-n" data-line-number="31"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="31"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="32"><div class="hljs-ln-n" data-line-number="32"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="32">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="33"><div class="hljs-ln-n" data-line-number="33"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="33"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="34"><div class="hljs-ln-n" data-line-number="34"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="34">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="35"><div class="hljs-ln-n" data-line-number="35"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="35"><span class="hljs-comment">   * 生命周期函数--监听页面卸载</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="36"><div class="hljs-ln-n" data-line-number="36"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="36"><span class="hljs-comment">   * navigateBack </span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="37"><div class="hljs-ln-n" data-line-number="37"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="37"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="38"><div class="hljs-ln-n" data-line-number="38"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="38">  <span class="hljs-title function_">onUnload</span>(<span class="hljs-params"></span>) {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="39"><div class="hljs-ln-n" data-line-number="39"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="39"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="40"><div class="hljs-ln-n" data-line-number="40"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="40">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="41"><div class="hljs-ln-n" data-line-number="41"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="41"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="42"><div class="hljs-ln-n" data-line-number="42"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="42">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="43"><div class="hljs-ln-n" data-line-number="43"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="43"><span class="hljs-comment">   * 页面相关事件处理函数--监听用户下拉动作</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="44"><div class="hljs-ln-n" data-line-number="44"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="44"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="45"><div class="hljs-ln-n" data-line-number="45"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="45">  <span class="hljs-title function_">onPullDownRefresh</span>(<span class="hljs-params"></span>) {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="46"><div class="hljs-ln-n" data-line-number="46"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="46"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="47"><div class="hljs-ln-n" data-line-number="47"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="47">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="48"><div class="hljs-ln-n" data-line-number="48"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="48"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="49"><div class="hljs-ln-n" data-line-number="49"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="49">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="50"><div class="hljs-ln-n" data-line-number="50"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="50"><span class="hljs-comment">   * 页面上拉触底事件的处理函数</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="51"><div class="hljs-ln-n" data-line-number="51"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="51"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="52"><div class="hljs-ln-n" data-line-number="52"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="52">  <span class="hljs-title function_">onReachBottom</span>(<span class="hljs-params"></span>) {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="53"><div class="hljs-ln-n" data-line-number="53"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="53"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="54"><div class="hljs-ln-n" data-line-number="54"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="54">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="55"><div class="hljs-ln-n" data-line-number="55"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="55"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="56"><div class="hljs-ln-n" data-line-number="56"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="56">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="57"><div class="hljs-ln-n" data-line-number="57"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="57"><span class="hljs-comment">   * 用户点击右上角分享</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="58"><div class="hljs-ln-n" data-line-number="58"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="58"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="59"><div class="hljs-ln-n" data-line-number="59"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="59">  <span class="hljs-title function_">onShareAppMessage</span>(<span class="hljs-params"></span>) {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="60"><div class="hljs-ln-n" data-line-number="60"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="60"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="61"><div class="hljs-ln-n" data-line-number="61"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="61">  }</td></tr></tbody></table></code></pre>
                                        <h2 id="wxs">wxs<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h2>
                                        <h3 id="数据类型">数据类型<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-bash highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">number  数值类型</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">string  字符串</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">Boolean 布尔</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">object  对象</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-keyword">function</span> 函数</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">array   数组</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"><span class="hljs-built_in">date</span>    日期</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">regexp  正则</td></tr></tbody></table></code></pre>
                                        <h3 id="语法">语法<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>只支持普通函数 var定义 类似Es5 , 遵循commonJs</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{n1.giao('giao')}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-tag">&lt;<span class="hljs-name">wxs</span> <span class="hljs-attr">module</span>=<span class="hljs-string">"n1"</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  module.exports.giao = function(str){</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">    return  str + 123</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  }</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"><span class="hljs-tag">&lt;/<span class="hljs-name">wxs</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <p>可以写成wxs文件</p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">wxs</span> <span class="hljs-attr">src</span>=<span class="hljs-string">""</span> <span class="hljs-attr">module</span>=<span class="hljs-string">""</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">wxs</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <h2 id="自定义组件">自定义组件<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h2>
                                        <h3 id="创建组件">创建组件<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-bash highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">创建components文件夹</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">创建text文件夹 右键 点击新建Component</td></tr></tbody></table></code></pre>
                                        <h3 id="引用组件">引用组件<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <p><strong>局部引用</strong></p>
                                        <blockquote>
                                            <p>只能在当前页面被引用</p>
                                        </blockquote>
                                        <p>.json下添加</p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-json highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">    <span class="hljs-attr">"text-01"</span> <span class="hljs-punctuation">:</span> <span class="hljs-string">"/components/text/text"</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  <span class="hljs-punctuation">}</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-punctuation">}</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"><span class="hljs-comment">// 调用 &lt;text-01&gt;&lt;/text-01&gt;</span></td></tr></tbody></table></code></pre>
                                        <p><strong>全局引用</strong></p>
                                        <blockquote>
                                            <p>可以再每个页面使用</p>
                                        </blockquote>
                                        <p>app.json下添加</p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-json highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">    <span class="hljs-attr">"text-01"</span> <span class="hljs-punctuation">:</span> <span class="hljs-string">"/components/text/text"</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  <span class="hljs-punctuation">}</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-punctuation">}</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"><span class="hljs-comment">// 调用 &lt;text-01&gt;&lt;/text-01&gt;</span></td></tr></tbody></table></code></pre>
                                        <h3 id="组件和页面的区别">组件和页面的区别<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <ul>
                                            <li>json 需要声明 <code> "component": true,</code></li>
                                            <li>js 中调用 Component()</li>
                                            <li>事件处理函数定义到methods</li>
                                        </ul>
                                        <h3 id="组件样式隔离">组件样式隔离<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>组件与页面之间互不影响</p>
                                        </blockquote>
                                        <p>只有class会有样式隔离 , 不要使用Id , 属性, 标签选择器</p>
                                        <p><strong>修改样式隔离选项</strong></p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-json highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-attr">"styleIsolation"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"isolated"</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-comment">// isolated 启用样式隔离</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-comment">// apply-shared 页面能影响组件 , 组件影响不了页面</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-comment">// shared  互相影响</span></td></tr></tbody></table></code></pre>
                                        <h3 id="数据方法属性">数据方法属性<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-title class_">Component</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-comment">   * 组件的属性列表</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-comment">   * 用来接收外界传的属性</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  <span class="hljs-attr">properties</span>: {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">    <span class="hljs-attr">max</span>: {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">      <span class="hljs-attr">type</span>: <span class="hljs-title class_">Number</span>, <span class="hljs-comment">//类型</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">      <span class="hljs-attr">value</span>: <span class="hljs-number">10</span> <span class="hljs-comment">// 默认值</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">    }</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14"><span class="hljs-comment">   * 组件的初始数据</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="16"><div class="hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="16">  <span class="hljs-attr">data</span>: {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="17"><div class="hljs-ln-n" data-line-number="17"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="17"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="18"><div class="hljs-ln-n" data-line-number="18"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="18">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="19"><div class="hljs-ln-n" data-line-number="19"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="19"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="20"><div class="hljs-ln-n" data-line-number="20"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="20">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="21"><div class="hljs-ln-n" data-line-number="21"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="21"><span class="hljs-comment">   * 组件的方法列表</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="22"><div class="hljs-ln-n" data-line-number="22"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="22"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="23"><div class="hljs-ln-n" data-line-number="23"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="23">  <span class="hljs-attr">methods</span>: {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="24"><div class="hljs-ln-n" data-line-number="24"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="24"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="25"><div class="hljs-ln-n" data-line-number="25"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="25">  }</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="26"><div class="hljs-ln-n" data-line-number="26"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="26">})</td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-comment">// 可以用setData修改 properties属性</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-attr">max</span>: <span class="hljs-variable language_">this</span>.<span class="hljs-property">properties</span>.<span class="hljs-property">max</span> + <span class="hljs-number">1</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">})</td></tr></tbody></table></code></pre>
                                        <h3 id="数据监听器">数据监听器<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-title class_">Component</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-attr">observers</span>: {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">    <span class="hljs-comment">//如果监听的数据太多 可以 obj.**</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">    <span class="hljs-string">'字段1,字段2.name'</span>:<span class="hljs-keyword">function</span>(<span class="hljs-params">字段<span class="hljs-number">1</span>,字段<span class="hljs-number">2</span></span>){}</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">  }</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">})</td></tr></tbody></table></code></pre>
                                        <h3 id="纯数据字段">纯数据字段<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-attr">options</span>:{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">    <span class="hljs-comment">// 正则 匹配上之后就是纯数据字段</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">    <span class="hljs-attr">pureDataPattern</span>: <span class="hljs-regexp">/^_/</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">},</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">  </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"><span class="hljs-attr">_data</span>: <span class="hljs-literal">true</span>  <span class="hljs-comment">// 只能用于纯数据处理,不能用来渲染</span></td></tr></tbody></table></code></pre>
                                        <h3 id="组件声明周期">组件声明周期<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-bash highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">created <span class="hljs-comment"># 组件刚创建 (不能调用setData)</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">attached <span class="hljs-comment"># 组件进入页面节点树(可以发请求, 初始化数据)</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">ready <span class="hljs-comment"># 在视图层布局完后执行</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">moved <span class="hljs-comment"># 实例被移动到另一个节点树</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">detached <span class="hljs-comment"># 组件被移出</span></td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-title class_">Component</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-comment">// 调用生命周期函数</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-attr">lifetimes</span>: {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">    <span class="hljs-title function_">attached</span>(<span class="hljs-params"></span>){},</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">    <span class="hljs-title function_">detached</span>(<span class="hljs-params"></span>){}</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  }</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">})</td></tr></tbody></table></code></pre>
                                        <h3 id="组件在页面的声明周期">组件在页面的声明周期<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-bash highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">show  <span class="hljs-comment"># 组件在页面被展示时</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">hide  <span class="hljs-comment"># 组件在页面被隐藏时</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">resize <span class="hljs-comment"># 组件页面尺寸发生变化</span></td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-title class_">Component</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-comment">// 调用页面生命周期函数</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-attr">pageLifetimes</span>: {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">   <span class="hljs-attr">show</span>: <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){},</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">   <span class="hljs-attr">hide</span>: <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){},</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">   <span class="hljs-attr">resize</span>: <span class="hljs-keyword">function</span>(<span class="hljs-params">size</span>){},</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">  }</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">})</td></tr></tbody></table></code></pre>
                                        <h3 id="插槽">插槽<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment">&lt;!--组件添加--&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-comment">&lt;!--页面调用--&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-tag">&lt;<span class="hljs-name">text-01</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  	// 插槽内容</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">	123</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8"><span class="hljs-tag">&lt;/<span class="hljs-name">text-01</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <p><strong>开启多个插槽</strong></p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"> <span class="hljs-attr">options</span>:{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">   <span class="hljs-comment">// 开启多个插槽</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">    <span class="hljs-attr">multipleSlots</span>: <span class="hljs-literal">true</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  },</td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"before"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-tag">&lt;<span class="hljs-name">text-01</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">  <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"before"</span>&gt;</span>before<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span>after<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"><span class="hljs-tag">&lt;/<span class="hljs-name">text-01</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <h2 id="通讯">通讯<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h2>
                                        <h3 id="属性绑定父传子">属性绑定(父传子)<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>父向子传值, 只能传递普通类型的数据</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">text-01</span> <span class="hljs-attr">count</span>=<span class="hljs-string">"{{count}}"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">text-01</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-attr">properties</span>: {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">    <span class="hljs-attr">count</span>: <span class="hljs-title class_">Number</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">},</td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{count}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <h3 id="事件绑定子传父">事件绑定(子传父)<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment">// 父页面</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-comment">// &lt;text-01 bind:giao="countAdd"&gt;&lt;/text-01&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-comment">// 在子js , 调用父函数</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-variable language_">this</span>.<span class="hljs-title function_">triggerEvent</span>(<span class="hljs-string">'giao'</span>,{<span class="hljs-attr">value</span>:<span class="hljs-variable language_">this</span>.<span class="hljs-property">properties</span>.<span class="hljs-property">count</span>})</td></tr></tbody></table></code></pre>
                                        <h3 id="获取组件实例">获取组件实例<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>可以获取组件的属性方法</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"getText"</span>&gt;</span>获取text<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-keyword">const</span> child = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">selectComponent</span>(<span class="hljs-string">'.text'</span>)</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">child.<span class="hljs-title function_">setData</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-attr">count</span>: child.<span class="hljs-property">properties</span>.<span class="hljs-property">count</span> + <span class="hljs-number">1</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">})</td></tr></tbody></table></code></pre>
                                        <h3 id="behaviors">behaviors<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>实现组件间代码共享, 可以包含属性, 数据, 生命周期函数和方法</p>
                                        </blockquote>
                                        <p><strong>Behaviors/index.js</strong></p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = <span class="hljs-title class_">Behavior</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-comment">//节点属性</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-attr">properties</span>:{},</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  <span class="hljs-comment">// 私有属性</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">  <span class="hljs-attr">data</span>: {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">    <span class="hljs-attr">age</span>:<span class="hljs-number">18</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">  <span class="hljs-comment">// 方法</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">  <span class="hljs-attr">methods</span>:{}</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">})</td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Behavior</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'../../Behaviors/index'</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-title class_">Component</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"> <span class="hljs-attr">behaviors</span>: [<span class="hljs-title class_">Behavior</span>],</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">})</td></tr></tbody></table></code></pre>
                                        <h2 id="npm包">npm包<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h2>
                                        <h3 id="vant-weapp">Vant Weapp<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>小程序项目 直接安装 npm i @vant/weapp@1.3.3 -S --production</p>
                                            <p>然后 点工具 构建npm</p>
                                        </blockquote>
                                        <p>修改 project.config.json</p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-json highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  ...</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-attr">"setting"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">    ...</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">    <span class="hljs-attr">"packNpmManually"</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">    <span class="hljs-attr">"packNpmRelationList"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">      <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">        <span class="hljs-attr">"packageJsonPath"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"./package.json"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">        <span class="hljs-attr">"miniprogramNpmDistDir"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"./"</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">      <span class="hljs-punctuation">}</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11">    <span class="hljs-punctuation">]</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12">  <span class="hljs-punctuation">}</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13"><span class="hljs-punctuation">}</span></td></tr></tbody></table></code></pre>
                                        <p>app.json 引入组件</p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-json highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-attr">"van-button"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/button/index"</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-punctuation">}</span></td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>&gt;</span>测试按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <h3 id="api-promise化">API Promise化<button class="cnblogs-toc-button"
                                                title="显示目录导航" aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>官方提供的API都是基于回调函数实现的, 容易造成回调地狱</p>
                                        </blockquote>
                                        <p><strong>miniprogram-api-promise</strong></p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-bash highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">npm i --save miniprogram-api-promise@1.0.4</td></tr></tbody></table></code></pre>
                                        <p><strong>注意: 每一次安装完包都要构建npm</strong></p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-keyword">import</span> {promisifyAll} <span class="hljs-keyword">from</span> <span class="hljs-string">'miniprogram-api-promise'</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-keyword">const</span> wxp = wx.<span class="hljs-property">p</span> = {}</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-comment">// 把wx放到wxp上 , 在任何页面都可以 wx.p.request()</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-title function_">promisifyAll</span>(wx,wxp)</td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-keyword">async</span> <span class="hljs-title function_">getPromise</span>(<span class="hljs-params"></span>){</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> wx.<span class="hljs-property">p</span>.<span class="hljs-title function_">request</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">    <span class="hljs-attr">url</span>: <span class="hljs-string">'url'</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">    <span class="hljs-attr">method</span>: <span class="hljs-string">'get'</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">  })</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(res);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">},</td></tr></tbody></table></code></pre>
                                        <h3 id="mobx">Mobx<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-bash highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">mobx-miniprogram <span class="hljs-comment"># 创建store</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">mobx-miniprogram-bindings <span class="hljs-comment"># 把store 绑定到组件</span></td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-bash highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1">npm i mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1</td></tr></tbody></table></code></pre>
                                        <p><strong>store/index.js</strong></p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-keyword">import</span> {action, observable} <span class="hljs-keyword">from</span> <span class="hljs-string">'mobx-miniprogram'</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-comment">// observable 返回值就是store实例</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> store = <span class="hljs-title function_">observable</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">  <span class="hljs-attr">count1</span>: <span class="hljs-number">1</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  <span class="hljs-attr">count2</span>: <span class="hljs-number">2</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">  <span class="hljs-comment">// get 计算属性</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">  <span class="hljs-keyword">get</span> <span class="hljs-title function_">sum</span>(){</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">    <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">count1</span> + <span class="hljs-variable language_">this</span>.<span class="hljs-property">count2</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11">  <span class="hljs-comment">// action 修改store值 不能用箭头函数</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12">  <span class="hljs-attr">updateCount</span>: <span class="hljs-title function_">action</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">num</span>) {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">count1</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">count1</span> + num</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">  })</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15">})</td></tr></tbody></table></code></pre>
                                        <p><strong>页面使用</strong></p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-keyword">import</span> {createStoreBindings} <span class="hljs-keyword">from</span> <span class="hljs-string">'mobx-miniprogram-bindings'</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-keyword">import</span> {store} <span class="hljs-keyword">from</span> <span class="hljs-string">'../../store/index'</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-title class_">Page</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  <span class="hljs-title function_">countAdd</span>(<span class="hljs-params">e</span>){</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">updateCount</span>(e.<span class="hljs-property">target</span>.<span class="hljs-property">dataset</span>.<span class="hljs-property">num</span>)</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9"><span class="hljs-comment">   * 生命周期函数--监听页面加载</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11">  <span class="hljs-attr">onLoad</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">options</span>) {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12">    <span class="hljs-comment">// createStoreBindings 可以将store数据绑定到页面</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">storeBingings</span> = <span class="hljs-title function_">createStoreBindings</span>(<span class="hljs-variable language_">this</span>,{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">      store,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15">      <span class="hljs-comment">// 字段和计算属性</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="16"><div class="hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="16">      <span class="hljs-attr">fields</span>: [<span class="hljs-string">'count1'</span>,<span class="hljs-string">'count2'</span>,<span class="hljs-string">'sum'</span>],</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="17"><div class="hljs-ln-n" data-line-number="17"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="17">      <span class="hljs-comment">// 方法</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="18"><div class="hljs-ln-n" data-line-number="18"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="18">      <span class="hljs-attr">actions</span>: [<span class="hljs-string">'updateCount'</span>]</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="19"><div class="hljs-ln-n" data-line-number="19"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="19">    })</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="20"><div class="hljs-ln-n" data-line-number="20"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="20">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="21"><div class="hljs-ln-n" data-line-number="21"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="21">  </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="22"><div class="hljs-ln-n" data-line-number="22"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="22">  <span class="hljs-comment"><span class="hljs-comment">/**</span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="23"><div class="hljs-ln-n" data-line-number="23"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="23"><span class="hljs-comment">   * 生命周期函数--监听页面卸载</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="24"><div class="hljs-ln-n" data-line-number="24"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="24"><span class="hljs-comment">   */</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="25"><div class="hljs-ln-n" data-line-number="25"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="25">  <span class="hljs-attr">onUnload</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="26"><div class="hljs-ln-n" data-line-number="26"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="26">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">storeBingings</span>.<span class="hljs-title function_">detroyStoreBindings</span>()</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="27"><div class="hljs-ln-n" data-line-number="27"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="27">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="28"><div class="hljs-ln-n" data-line-number="28"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="28">})</td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">text</span>&gt;</span>{{count1}}+{{count2}}={{sum}}<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"countAdd"</span> <span class="hljs-attr">data-num</span>=<span class="hljs-string">"{{1}}"</span>&gt;</span>+1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-tag">&lt;<span class="hljs-name">button</span>  <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"countAdd"</span> <span class="hljs-attr">data-num</span>=<span class="hljs-string">"{{-1}}"</span>&gt;</span>-1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <p><strong>组件使用</strong></p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-js highlighter-hljs hljs language-javascript hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-keyword">import</span> {storeBindingsBehavior}  <span class="hljs-keyword">from</span> <span class="hljs-string">'mobx-miniprogram-bindings'</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-keyword">import</span> {store} <span class="hljs-keyword">from</span> <span class="hljs-string">'../../store/index'</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-title class_">Component</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">  <span class="hljs-attr">behaviors</span>: [storeBindingsBehavior],</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">  <span class="hljs-attr">storeBindings</span>:{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">    store,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">    <span class="hljs-attr">fields</span>:{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">      <span class="hljs-attr">count1</span>: <span class="hljs-string">'count1'</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">      <span class="hljs-attr">count2</span>: <span class="hljs-string">'count2'</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">      <span class="hljs-attr">sum</span>: <span class="hljs-string">'sum'</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11">    },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12">    <span class="hljs-attr">actions</span>:{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13">      <span class="hljs-attr">updateCount</span>: <span class="hljs-string">'updateCount'</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">    }</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15">  },</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="16"><div class="hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="16">  <span class="hljs-attr">methods</span>:{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="17"><div class="hljs-ln-n" data-line-number="17"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="17">  	<span class="hljs-title function_">countAdd</span>(<span class="hljs-params">e</span>){</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="18"><div class="hljs-ln-n" data-line-number="18"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="18">      <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">updateCount</span>(e.<span class="hljs-property">target</span>.<span class="hljs-property">dataset</span>.<span class="hljs-property">num</span>)</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="19"><div class="hljs-ln-n" data-line-number="19"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="19">    }</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="20"><div class="hljs-ln-n" data-line-number="20"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="20">  }</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="21"><div class="hljs-ln-n" data-line-number="21"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="21">})</td></tr></tbody></table></code></pre>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-html highlighter-hljs hljs language-xml hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag">&lt;<span class="hljs-name">text</span>&gt;</span>{{count1}}+{{count2}}={{sum}}<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"countAdd"</span> <span class="hljs-attr">data-num</span>=<span class="hljs-string">"{{1}}"</span>&gt;</span>+1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-tag">&lt;<span class="hljs-name">button</span>  <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"countAdd"</span> <span class="hljs-attr">data-num</span>=<span class="hljs-string">"{{-1}}"</span>&gt;</span>-1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></td></tr></tbody></table></code></pre>
                                        <h2 id="分包">分包<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h2>
                                        <h3 id="什么是分包">什么是分包<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>把完整的小程序项目 , 按照需求划分成不同的子包 用户使用时按需加载</p>
                                        </blockquote>
                                        <ul>
                                            <li>可以优化小程序首次启动的下载时间</li>
                                            <li>多团队共同开发, 解耦协作</li>
                                        </ul>
                                        <h3 id="分包后项目构成">分包后项目构成<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <ul>
                                            <li>主包: 启动页面 + tabBer页面 , 一些公共资源</li>
                                            <li>分包: 只包含和当前分包有关的页面资源</li>
                                        </ul>
                                        <p>小程序启动时, 默认会下载主包并启动主包页面, 当用户进入分包的某个页面, 客户端会把对应分包下载下来, 进行展示</p>
                                        <p>**注意: ** 整个小程序不能超过16M, 单包不能超过2M</p>
                                        <h3 id="使用分包">使用分包<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>小程序会按 subpackages 的配置进行分包, subpackages 之外的目录将被打包到主包中</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-json highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment">// 进行分包声明</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-attr">"subpackages"</span><span class="hljs-punctuation">:</span><span class="hljs-punctuation">[</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">    <span class="hljs-attr">"root"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"text1"</span><span class="hljs-punctuation">,</span> <span class="hljs-comment">//第一个分包目录</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">    <span class="hljs-attr">"pages"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>  <span class="hljs-comment">// 分包下的页面</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">      <span class="hljs-string">"pages/info/info"</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">    <span class="hljs-punctuation">]</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">  <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">  <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">    <span class="hljs-attr">"root"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"text2"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11">    <span class="hljs-attr">"pages"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12">      <span class="hljs-string">"pages/info/info"</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13">    <span class="hljs-punctuation">]</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">  <span class="hljs-punctuation">}</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15"><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span></td></tr></tbody></table></code></pre>
                                        <ol>
                                            <li>主包无法引用分包的私有资源</li>
                                            <li>分包之间不能引用私有资源</li>
                                            <li>分包可以引用公共资源</li>
                                        </ol>
                                        <h3 id="独立分包">独立分包<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>普通分包依赖主包</p>
                                            <p>独立分包独立运行 , 不能引用公共资源</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-json highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment">// 进行分包声明</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-attr">"subpackages"</span><span class="hljs-punctuation">:</span><span class="hljs-punctuation">[</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">  <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">    <span class="hljs-attr">"root"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"text1"</span><span class="hljs-punctuation">,</span> <span class="hljs-comment">//第一个分包目录</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">    <span class="hljs-attr">"pages"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>  <span class="hljs-comment">// 分包下的页面</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">      <span class="hljs-string">"pages/info/info"</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">    <span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">    <span class="hljs-attr">"independent"</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span> <span class="hljs-comment">// 声明独立分包</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">  <span class="hljs-punctuation">}</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10"><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span></td></tr></tbody></table></code></pre>
                                        <h3 id="分包预下载">分包预下载<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h3>
                                        <blockquote>
                                            <p>进入指定页面, 下载需要用的分包</p>
                                            <p>预下载大小限额2M</p>
                                        </blockquote>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-json highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-attr">"preloadRule"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-attr">"pages/message/message"</span><span class="hljs-punctuation">:</span><span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">    <span class="hljs-comment">// 在指定网络模式进行预下载</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">    <span class="hljs-attr">"network"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"all"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">    <span class="hljs-comment">// root名 下载哪些包</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">    <span class="hljs-attr">"packages"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">"text1"</span><span class="hljs-punctuation">]</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">  <span class="hljs-punctuation">}</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8"><span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span></td></tr></tbody></table></code></pre>
                                        <h2 id="自定义tabbar">自定义TabBar<button class="cnblogs-toc-button" title="显示目录导航"
                                                aria-expanded="false"></button></h2>
                                        <blockquote>
                                            <p>配置信息 custom: true 是否开启自定义tabbar</p>
                                        </blockquote>
                                        <p>app.json</p>
                                        <pre class="highlighter-hljs"
                                            highlighted="true"><code class="language-json highlighter-hljs hljs hljs-line-numbers" data-dark-theme="true"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2">  <span class="hljs-attr">"tabBar"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3">    <span class="hljs-attr">"custom"</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4">    <span class="hljs-comment">// list 要保留 低版本兼容</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5">    <span class="hljs-attr">"list"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">      <span class="hljs-attr">"pagePath"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"page/component/index"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">      <span class="hljs-attr">"text"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"组件"</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">    <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">      <span class="hljs-attr">"pagePath"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"page/API/index"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10">      <span class="hljs-attr">"text"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"接口"</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11">    <span class="hljs-punctuation">}</span><span class="hljs-punctuation">]</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12">  <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13">  <span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><span class="hljs-punctuation">}</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14"><span class="hljs-punctuation">}</span></td></tr></tbody></table></code></pre>
                                        <p>跟根目录添加custom-tab-bar 文件 新建Component</p>
                                        <p>编写代码即可</p>

                                    </div>
                                    <div class="clear"></div>
                                    <div id="blog_post_info_block" role="contentinfo">
                                        <div id="BlogPostCategory">
                                            分类:
                                            <a href="https://www.cnblogs.com/rain-sparse/category/2054248.html"
                                                target="_blank">前端</a>
                                        </div>


                                        <div id="blog_post_info">
                                            <div id="green_channel">
                                                <a href="javascript:void(0);" id="green_channel_digg"
                                                    onclick="DiggIt(16380520,cb_blogId,1);green_channel_success(this,'谢谢推荐！');">好文要顶</a>
                                                <a id="green_channel_follow"
                                                    onclick="follow('4ea5c7e3-75e3-471c-1bdb-08d8c8014cc2');"
                                                    href="javascript:void(0);">关注我</a>
                                                <a id="green_channel_favorite"
                                                    onclick="AddToWz(cb_entryId);return false;"
                                                    href="javascript:void(0);">收藏该文</a>
                                                <a id="green_channel_weibo" href="javascript:void(0);" title="分享至新浪微博"
                                                    onclick="ShareToTsina()"><img
                                                        src="https://common.cnblogs.com/images/icon_weibo_24.png"
                                                        alt=""></a>
                                                <a id="green_channel_wechat" href="javascript:void(0);" title="分享至微信"
                                                    onclick="shareOnWechat()"><img
                                                        src="https://common.cnblogs.com/images/wechat.png" alt=""></a>
                                            </div>
                                            <div id="author_profile">
                                                <div id="author_profile_info" class="author_profile_info">
                                                    <a href="https://home.cnblogs.com/u/rain-sparse/"
                                                        target="_blank"><img
                                                            src="https://pic.cnblogs.com/face/2299071/20210206002934.png"
                                                            class="author_avatar" alt=""></a>
                                                    <div id="author_profile_detail" class="author_profile_info">
                                                        <a
                                                            href="https://home.cnblogs.com/u/rain-sparse/">rain_sparse</a><br>
                                                        <a href="https://home.cnblogs.com/u/rain-sparse/followees/">关注 -
                                                            1</a><br>
                                                        <a href="https://home.cnblogs.com/u/rain-sparse/followers/">粉丝 -
                                                            1</a>
                                                    </div>
                                                </div>
                                                <div class="clear"></div>
                                                <div id="author_profile_honor"></div>
                                                <div id="author_profile_follow">
                                                </div>
                                            </div>
                                            <div id="div_digg">
                                                <div class="diggit" onclick="votePost(16380520,'Digg')">
                                                    <span class="diggnum" id="digg_count">0</span>
                                                </div>
                                                <div class="buryit" onclick="votePost(16380520,'Bury')">
                                                    <span class="burynum" id="bury_count">0</span>
                                                </div>
                                                <div class="clear"></div>
                                                <div class="diggword" id="digg_tips">
                                                </div>
                                            </div>

                                            <script type="text/javascript">
                                                currentDiggType = 0;
                                            </script>
                                        </div>
                                        <div class="clear"></div>
                                        <div id="post_next_prev">

                                            <a href="https://www.cnblogs.com/rain-sparse/p/16353937.html"
                                                class="p_n_p_prefix">« </a> 上一篇： <a
                                                href="https://www.cnblogs.com/rain-sparse/p/16353937.html"
                                                data-featured-image="" title="发布于 2022-06-07 23:53">vue2</a>

                                        </div>
                                    </div>
                                </div>
                                <div class="postDesc">posted @
                                    <span id="post-date">2022-06-16 01:06</span>&nbsp;
                                    <a href="https://www.cnblogs.com/rain-sparse/">rain_sparse</a>&nbsp;
                                    阅读(<span id="post_view_count">4</span>)&nbsp;
                                    评论(<span id="post_comment_count">0</span>)&nbsp;
                                    <a href="https://www.cnblogs.com/rain-sparse/p/16380520.md"
                                        target="_blank">MD</a>&nbsp;
                                    <a href="https://i.cnblogs.com/EditPosts.aspx?postid=16380520"
                                        rel="nofollow">编辑</a>&nbsp;
                                    <a href="javascript:void(0)" onclick="AddToWz(16380520);return false;">收藏</a>&nbsp;
                                    <a href="javascript:void(0)"
                                        onclick="reportManager.report({ currentUserId: '4ea5c7e3-75e3-471c-1bdb-08d8c8014cc2', targetType: 'blogPost', targetId: '16380520', targetLink: 'https://www.cnblogs.com/rain-sparse/p/16380520.html', title: '小程序' })">举报</a>
                                </div>
                            </div>


                        </div>
                        <!--end: topics 文章、评论容器-->
                    </div>

                    <script>
                        var cb_entryId = 16380520, cb_entryCreatedDate = '2022-06-16 01:06', cb_postType = 1, cb_postTitle = '小程序';
                        var allowComments = true, cb_blogId = 663943, cb_blogApp = 'rain-sparse', cb_blogUserGuid = '4ea5c7e3-75e3-471c-1bdb-08d8c8014cc2';
                        mermaidRender.render()
                        markdown_highlight()
                        zoomManager.apply("#cnblogs_post_body img:not(.code_img_closed):not(.code_img_opened)");
                        updatePostStats(
                            [cb_entryId],
                            function (id, count) { $("#post_view_count").text(count) },
                            function (id, count) { $("#post_comment_count").text(count) })
                    </script>
                    <a id="!comments"></a>
                    <div id="blog-comments-placeholder"></div>
                    <div id="comment_form" class="commentform">
                        <a name="commentform"></a>
                        <div id="divCommentShow"></div>
                        <div id="comment_nav"><span id="span_refresh_tips"></span><a href="javascript:void(0);"
                                onclick="return RefreshCommentList();" id="lnk_RefreshComments" runat="server"
                                clientidmode="Static">刷新评论</a><a href="#" onclick="return RefreshPage();">刷新页面</a><a
                                href="#top">返回顶部</a></div>
                        <div id="comment_form_container" style="visibility: visible;">
                            <script type="text/javascript"
                                src="https://mention.cnblogs.com/bundles/mention.min.js"></script>
                            <div id="commentform_title">发表评论</div>
                            <span id="tip_comment" style="color:Red"></span>
                            <div class="commentbox_main comment_textarea">
                                <div class="commentbox_title">
                                    <div class="commentbox_title_left">
                                        <span id="btn_edit_comment" class="commentbox_tab active" title="编辑评论">编辑</span>
                                        <span id="btn_preview_comment" class="commentbox_tab"
                                            title="Markdown 预览">预览</span>
                                    </div>
                                    <div class="commentbox_title_right">
                                        <span id="ubb_bold" class="comment_icon" alt="粗体" title="添加粗体(Ctrl + B)">
                                            <svg class="comment_svg" viewBox="0 0 24 24"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <g fill-rule="evenodd">
                                                    <path
                                                        d="m13.221 19c1.4414 0 2.5793-0.27451 3.3759-0.82353 0.92931-0.66667 1.4034-1.7059 1.4034-3.1176 0-0.94118-0.22759-1.7059-0.66379-2.2549-0.45517-0.56863-1.119-0.94118-2.0103-1.1176 0.68276-0.27451 1.1948-0.64706 1.5552-1.1569 0.36034-0.54902 0.55-1.2157 0.55-2 0-1.0588-0.36034-1.902-1.0621-2.5294-0.75862-0.66667-1.8207-1-3.1672-1h-6.2017v14h6.2207zm-0.82196-8h-3.3987v-4h3.4367c0.91139 0 1.557 0.15686 1.9747 0.47059 0.37975 0.29412 0.58861 0.78431 0.58861 1.451 0 0.72549-0.20886 1.2549-0.58861 1.5882-0.39873 0.31373-1.0633 0.4902-2.0127 0.4902zm0.52612 6h-3.9249v-4h3.9855c1.052 0 1.8208 0.16216 2.3064 0.48649 0.46532 0.32432 0.70809 0.84685 0.70809 1.5856 0 0.72072-0.3237 1.2252-0.9711 1.5495-0.50578 0.25225-1.2139 0.37838-2.104 0.37838z"
                                                        fill-rule="nonzero" stroke-width=".35"></path>
                                                </g>
                                            </svg>
                                        </span>
                                        <span id="ubb_url" class="comment_icon" title="添加链接(Ctrl + K)" alt="链接">
                                            <svg class="comment_svg comment_svg_stroke" viewBox="0 0 24 24"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <g fill-rule="evenodd">
                                                    <g transform="translate(4 4)" fill-rule="nonzero" stroke-width=".4">
                                                        <path
                                                            d="m6.304 9.696c-0.288-0.288-0.512-0.608-0.704-0.992-0.16-0.32-0.032-0.704 0.288-0.864 0.32-0.16 0.704-0.032 0.864 0.288 0.128 0.224 0.256 0.448 0.448 0.64 0.928 0.928 2.432 0.928 3.36 0l3.36-3.328c0.928-0.928 0.928-2.432 0-3.36s-2.432-0.928-3.36 0l-2.272 2.272c-0.256 0.256-0.64 0.256-0.896 0-0.256-0.256-0.256-0.64 0-0.896l2.272-2.272c1.44-1.44 3.744-1.44 5.184 0 1.44 1.44 1.44 3.744 0 5.184l-3.36 3.296c-0.704 0.704-1.632 1.088-2.592 1.088-0.928 0-1.856-0.352-2.592-1.056z">
                                                        </path>
                                                        <path
                                                            d="m3.776 15.808c-0.992 0-1.888-0.384-2.592-1.056-1.44-1.44-1.44-3.744 0-5.184l3.328-3.328c1.44-1.44 3.744-1.44 5.184 0 0.288 0.288 0.544 0.64 0.736 1.024 0.16 0.32 0 0.704-0.32 0.864-0.32 0.16-0.704 0-0.864-0.32-0.128-0.256-0.288-0.48-0.48-0.672-0.928-0.928-2.432-0.928-3.36 0l-3.296 3.328c-0.928 0.928-0.928 2.432 0 3.36 0.448 0.448 1.056 0.704 1.664 0.704 0.608 0 1.248-0.256 1.664-0.704l2.112-2.112c0.256-0.256 0.64-0.256 0.896 0s0.256 0.64 0 0.896l-2.112 2.112c-0.672 0.704-1.568 1.088-2.56 1.088z">
                                                        </path>
                                                    </g>
                                                </g>
                                            </svg>
                                        </span>
                                        <span id="ubb_code" class="comment_icon" title="添加代码(Ctrl + `)" alt="代码">
                                            <svg class="comment_svg comment_svg_stroke" viewBox="0 0 24 24"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <g fill-rule="evenodd">
                                                    <g transform="translate(16 6)" stroke-linecap="round"
                                                        stroke-width="2">
                                                        <line x1=".5" x2="4.5" y1=".7" y2="6.3"></line>
                                                        <line
                                                            transform="translate(2.5 9.1) scale(1 -1) translate(-2.5 -9.1)"
                                                            x1=".5" x2="4.5" y1="6.3" y2="11.9"></line>
                                                    </g>
                                                    <g transform="translate(3 6.1)" stroke-linecap="round"
                                                        stroke-width="2">
                                                        <line
                                                            transform="translate(2.5 3.5) scale(-1 1) translate(-2.5 -3.5)"
                                                            x1=".5" x2="4.5" y1=".7" y2="6.3"></line>
                                                        <line
                                                            transform="translate(2.5 9.1) scale(-1) translate(-2.5 -9.1)"
                                                            x1=".5" x2="4.5" y1="6.3" y2="11.9"></line>
                                                    </g>
                                                    <path
                                                        transform="translate(12 12.5) scale(1 -1) translate(-12 -12.5)"
                                                        d="m10.778 7.1249c0.50008-0.11366 0.9978 0.16911 1.1643 0.64128l0.032406 0.11223 2 8.8c0.1224 0.53855-0.21496 1.0744-0.75351 1.1968-0.50008 0.11366-0.9978-0.16911-1.1643-0.64128l-0.032406-0.11223-2-8.8c-0.1224-0.53855 0.21496-1.0744 0.75351-1.1968z"
                                                        fill-rule="nonzero" stroke-width=".25"></path>
                                                </g>
                                            </svg>
                                        </span>
                                        <span id="ubb_quote" class="comment_icon" title="添加引用(Ctrl + Q)" alt="引用">
                                            <svg class="comment_svg" viewBox="0 0 24 24"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <g fill-rule="evenodd">
                                                    <g transform="translate(5 4)" fill-rule="nonzero"
                                                        stroke-width=".25">
                                                        <path
                                                            d="m5.0013 15v-5.2702h-2.8008c-0.13413-3.3762 1.2004-6.2143 4.0009-8.5135l-1.2-1.2163c-3.335 2.2996-5.0013 5.8119-5.0013 10.54v4.4595h5.0013-1.285e-5zm8.7987 0v-5.2702h-2.8008c-0.13453-3.3762 1.2-6.2143 4.0009-8.5135l-1.2-1.2163c-3.335 2.2996-5.0013 5.8119-5.0013 10.54v4.4595h5.0013-1.28e-5z">
                                                        </path>
                                                    </g>
                                                </g>
                                            </svg>
                                        </span>
                                        <span id="ubb_img" class="comment_icon" alt="图片" title="上传图片(Ctrl + I)">
                                            <svg class="comment_svg" viewBox="0 0 24 24"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <g fill-rule="evenodd">
                                                    <g transform="translate(3 3.8)" fill-rule="nonzero">
                                                        <path
                                                            d="m14.1 0.58235h-11.2c-1.32 0-2.4 1.0482-2.4 2.3294v10.871c0 1.2812 1.08 2.3294 2.4 2.3294h11.2c1.32 0 2.4-1.0482 2.4-2.3294v-10.871c0-1.2812-1.08-2.3294-2.4-2.3294zm0.7 13.569-3.63-3.4165 1.33-1.2909c0.21-0.20382 0.59-0.20382 0.8 0l1.6 1.5529v2.7856c0 0.13588-0.04 0.26206-0.1 0.36882zm-11.9-12.016h11.2c0.44 0 0.8 0.34941 0.8 0.77647v5.8915l-0.47-0.45618c-0.84-0.825-2.22-0.825-3.07 0l-1.35 1.3103-2.39-2.2421c-0.85-0.825-2.22-0.825-3.05-0.019412l-2.48 2.2615v-6.7456c0.01-0.42706 0.37-0.77647 0.81-0.77647zm-0.8 11.647v-1.9897l3.6-3.2806c0.21-0.20382 0.58-0.21353 0.81 0.0097059l6.43 6.0371h-10.04c-0.44 0-0.8-0.33971-0.8-0.77647z">
                                                        </path>
                                                        <ellipse cx="10.5" cy="6.4059" rx="1" ry="1"></ellipse>
                                                    </g>
                                                </g>
                                            </svg>
                                        </span>
                                    </div>
                                </div>
                                <div style="display:none">
                                    <span id="comment_edit_id"></span>
                                    <span id="span_parentcomment_id"></span>
                                    <span id="span_parent_id"></span>
                                    <span id="span_comment_replyto"></span>
                                    <span id="span_comment_posted"></span>
                                    <span id="span_current_user_id">4ea5c7e3-75e3-471c-1bdb-08d8c8014cc2</span>
                                </div>
                                <textarea id="tbCommentBody" placeholder="支持 Markdown"></textarea>
                                <div id="tbCommentBodyPreview" class="feedbackCon" style="display: none">
                                    <div id="tbCommentBodyPreviewBody"
                                        class="blog_comment_body comment_preview cnblogs-markdown"></div>
                                </div>
                                <div class="commentbox_footer">
                                    <span>&nbsp;</span>
                                    <span href="javascript:void(0)" id="ubb_auto_completion" class="comment_option">
                                        <svg style="display: none" id="comment_auto_completion_on"
                                            viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg"
                                            fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round"
                                            stroke-miterlimit="2">
                                            <path
                                                d="M406.724 908.504c-89.02 0-157.885-32.319-206.594-96.957-49.549-64.639-73.903-155.795-73.903-274.299 0-116.017 24.354-206.345 73.903-270.155 48.71-63.81 117.574-95.3 206.594-95.3h19.316l-7.559 72.925h-3.359c-65.505 0-115.054 25.69-150.326 77.069-35.272 50.55-52.908 122.647-52.908 215.461 0 94.472 17.636 168.226 52.908 220.434 35.272 51.379 84.82 77.897 150.326 77.897h3.36l7.558 72.925h-19.316zm266.548 0c89.02 0 157.885-32.319 206.594-96.957 49.55-64.639 73.904-155.795 73.904-274.299 0-116.017-24.355-206.345-73.904-270.155-48.709-63.81-117.573-95.3-206.594-95.3h-19.315l7.558 72.925h3.36c65.505 0 115.054 25.69 150.326 77.069 35.272 50.55 52.908 122.647 52.908 215.461 0 94.472-17.636 168.226-52.908 220.434-35.272 51.379-84.821 77.897-150.327 77.897h-3.359l-7.558 72.925h19.315zm-94.068-65.897c0 31.514.854 54.433 1.708 68.758 1.709 14.325 3.417 25.784 6.835 34.38 2.563 8.594 6.834 14.324 12.814 20.054 5.126 5.73 14.523 11.46 27.337 17.189v34.38H451.914v-34.38c17.086-7.162 29.046-15.757 35.026-24.352 5.126-10.027 9.398-22.92 11.106-38.676 1.709-17.19 2.563-42.974 2.563-77.353V238.109c0-32.947-.854-55.866-1.709-71.623-1.708-14.325-4.271-25.784-6.834-32.947-3.417-8.595-7.689-15.757-12.814-20.054-5.126-5.73-14.523-10.027-27.338-17.19V61.916h175.984v34.38c-11.96 5.73-21.357 11.459-26.483 15.756-5.125 5.73-9.397 11.46-12.814 20.055-3.417 7.162-5.98 18.622-6.834 34.379-1.709 15.757-2.563 38.676-2.563 71.623v604.498z"
                                                fill-rule="nonzero"></path>
                                        </svg>
                                        <svg id="comment_auto_completion_off" viewBox="0 0 1080 1080"
                                            xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"
                                            stroke-linejoin="round" stroke-miterlimit="2">
                                            <path
                                                d="M242.96 223.172l59.627 58.009c-14.277 10.773-26.874 24.032-37.791 40.606-35.272 50.55-52.908 122.647-52.908 215.461 0 94.472 17.636 168.226 52.908 220.434 35.272 51.379 84.82 77.897 150.326 77.897h3.36l7.558 72.925h-19.316c-89.02 0-157.885-32.319-206.594-96.957-49.549-64.639-73.903-155.795-73.903-274.299 0-116.017 24.354-206.345 73.903-270.155 12.597-16.574 26.874-31.49 42.83-43.921zm36.952-23.204c36.112-19.06 78.943-28.175 126.812-28.175h19.316l-7.559 72.925h-3.359c-27.714 0-52.908 4.144-74.743 14.088l-60.467-58.838zM805.123 770.94l60.466 58.01c-47.869 53.036-111.695 79.554-192.317 79.554h-19.315l7.558-72.925h3.36c59.626 0 105.816-21.546 140.248-64.638zm23.515-37.29c26.034-49.723 39.47-115.19 39.47-196.402 0-92.814-17.635-164.91-52.907-215.461-35.272-51.38-84.821-77.069-150.327-77.069h-3.359l-7.558-72.925h19.315c89.02 0 157.885 31.49 206.594 95.3 49.55 63.81 73.904 154.138 73.904 270.155 0 108.56-20.996 194.744-62.146 257.725l-62.986-61.324zM500.609 474.465l78.595 75.92v292.222c0 31.514.854 54.433 1.708 68.758 1.709 14.325 3.417 25.784 6.835 34.38 2.563 8.594 6.834 14.324 12.814 20.054 5.126 5.73 14.523 11.46 27.337 17.189v34.38H451.914v-34.38c17.086-7.162 29.046-15.757 35.026-24.352 5.126-10.027 9.398-22.92 11.106-38.676 1.709-17.19 2.563-42.974 2.563-77.353V474.465zm0-60.164V238.11c0-32.947-.854-55.866-1.709-71.623-1.708-14.325-4.271-25.784-6.834-32.947-3.417-8.595-7.689-15.757-12.814-20.054-5.126-5.73-14.523-10.027-27.338-17.19v-34.38h175.984v34.38c-11.96 5.73-21.357 11.459-26.483 15.756-5.125 5.73-9.397 11.46-12.814 20.055-3.417 7.162-5.98 18.622-6.834 34.379-1.709 15.757-2.563 38.676-2.563 71.623v253.545l-78.595-77.353z">
                                            </path>
                                            <path d="M153.103 132.024l805.45 783.706-44.277 45.505-805.45-783.706z">
                                            </path>
                                        </svg>
                                        <span class="inline_middle">自动补全</span>
                                    </span>
                                </div>
                            </div>
                            <p id="commentbox_opt">
                                <input id="btn_comment_submit" type="button" class="comment_btn"
                                    title="提交评论(Ctrl + Enter)" value="提交评论">
                                <span id="span_comment_canceledit" style="display:none"><a href="javascript:void(0);"
                                        onclick="return CancelCommentEdit()">不改了</a></span>
                                <a href="javascript:void(0);" onclick="return account.logout();">退出</a>
                            </p>
                            <div id="tip_comment2" style="color:Red"></div>
                            <p>[Ctrl+Enter快捷键提交]</p>
                            <script>var commentEditor = initCommentEditor("tbCommentBody");</script>

                        </div>
                        <div class="ad_text_commentbox" id="ad_text_under_commentbox"></div>
                        <div id="cnblogs_ch"></div>
                        <div id="opt_under_post"></div>
                        <div id="cnblogs_c1" class="under-post-card" style="display: none;">
                            <div id="div-gpt-ad-1592365906576-0" style="width: 300px; height: 250px;"></div>
                        </div>
                        <div id="under_post_card1">
                            <div class="under-post-card">
                                <b>编辑推荐：</b>
                                <br>

                                · <a href="https://www.cnblogs.com/deatharthas/p/16390116.html" target="_blank">聊聊 C# 中的
                                    composite 模式</a>
                                <br>
                                · <a href="https://www.cnblogs.com/thanks/p/16383551.html"
                                    target="_blank">微软外服工作札记：聊聊微软的知识管理服务平台</a>
                                <br>
                                · <a href="https://www.cnblogs.com/yexiaochai/p/16367753.html"
                                    target="_blank">技术管理进阶——把控基建与业务的比例和节奏</a>
                                <br>
                                · <a href="https://www.cnblogs.com/gaoxingnjiagoutansuo/p/16383137.html"
                                    target="_blank">聊聊 内存模型与内存序</a>
                                <br>
                                · <a href="https://www.cnblogs.com/huangxincheng/p/16378081.html" target="_blank">聊聊 C#
                                    方法重载的底层玩法</a>
                                <br>
                            </div>
                        </div>
                        <div id="under_post_card2">
                            <div class="itnews under-post-card">
                                <b>最新新闻</b>：
                                <br>
                                · <a href="//news.cnblogs.com/n/723052/" target="_blank">阿里云们的十字路口：自研与出海并进 不再牺牲利润换营收</a>
                                <br>
                                · <a href="//news.cnblogs.com/n/723051/" target="_blank">启发了苹果、微信的设计哲学，永不过时</a>
                                <br>
                                · <a href="//news.cnblogs.com/n/723050/" target="_blank">自动驾驶大迁徙：从L4到L2的降维之战</a>
                                <br>
                                · <a href="//news.cnblogs.com/n/723049/" target="_blank">大自然的终极超级武器——磁星</a>
                                <br>
                                · <a href="//news.cnblogs.com/n/723048/"
                                    target="_blank">CV的未来是图神经网络？中科院软件所发布全新CV模型ViG，性能超越ViT</a>
                                <br>
                                » <a href="https://news.cnblogs.com/" title="IT 新闻" target="_blank">更多新闻...</a>
                            </div>
                        </div>
                        <div id="HistoryToday" class="under-post-card"></div>
                        <script type="text/javascript">
                            var commentManager = new blogCommentManager();
                            commentManager.renderComments(0);
                            fixPostBody();

                            window.tocManager.displayDisableTocTips = true;
                            window.tocManager.generateToc();
                            deliverT2();
                            deliverC1C2();
                            loadNewsAndKb();
                            LoadPostCategoriesTags(cb_blogId, cb_entryId); LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid);
                            GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate, cb_postType);
                            loadOptUnderPost();
                            GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);
                        </script>
                    </div>

                </div>
                <!--end: forFlow -->
            </div>
            <!--end: mainContent 主体内容容器-->
            <div id="sideBar">
                <div id="sideBarMain">
                    <div id="sidebar_news" class="newsItem">
                        <!--done-->
                        <h3 class="catListTitle">公告</h3>

                        <div id="blog-news">

                            <div id="profile_block">
                                昵称：
                                <a href="https://home.cnblogs.com/u/rain-sparse/">
                                    rain_sparse
                                </a>
                                <br>
                                园龄：
                                <a href="https://home.cnblogs.com/u/rain-sparse/" title="入园时间：2021-02-04">
                                    1年4个月
                                </a>
                                <br>
                                粉丝：
                                <a href="https://home.cnblogs.com/u/rain-sparse/followers/">
                                    1
                                </a>
                                <br>
                                关注：
                                <a href="https://home.cnblogs.com/u/rain-sparse/followees/">
                                    1
                                </a>
                                <div id="p_b_follow">
                                    <!-- <a href="javascript:void(0)"
                                        onclick="follow('4ea5c7e3-75e3-471c-1bdb-08d8c8014cc2')">+加关注</a> -->
                                </div>
                                <script>getFollowStatus('4ea5c7e3-75e3-471c-1bdb-08d8c8014cc2');</script>
                            </div>
                        </div>

                    </div>
                    <div id="sidebar_c3"></div>
                    <div id="blog-calendar" style="display:none"></div>
                    <script>loadBlogDefaultCalendar();</script>
                    <div id="leftcontentcontainer">
                        <div id="blog-sidecolumn">
                            <!-- 搜索 -->
                            <div id="sidebar_search" class="sidebar-block">

                            </div>

                            <!-- 常用链接 -->


                            <!-- 最新随笔 -->


                            <!-- 我的标签 -->
                            <div id="sidebar_toptags" class="sidebar-block"></div>

                            <!-- 积分与排名 -->


                            <!-- 随笔分类、随笔档案、文章分类、新闻分类、相册、链接 -->
                            <div id="sidebar_categories">

                                <div id="sidebar_postcategory" class="catListPostCategory sidebar-block">
                                    <h3 class="catListTitle">

                                        <a class="sidebar-card-title-a"
                                            href="https://www.cnblogs.com/rain-sparse/categories">随笔分类</a>



                                    </h3>

                                    <ul>

                                        <li data-category-list-item-visible="true" style="display: block">

                                            <a href="https://www.cnblogs.com/rain-sparse/category/2055797.html"
                                                class="category-item-link" rel="" target="">其他(3)</a>

                                        </li>
                                        <li data-category-list-item-visible="true" style="display: block">

                                            <a href="https://www.cnblogs.com/rain-sparse/category/2054248.html"
                                                class="category-item-link" rel="" target="">前端(10)</a>

                                        </li>

                                    </ul>


                                </div>
                                <div id="sidebar_postarchive" class="catListPostArchive sidebar-block">
                                    <h3 class="catListTitle">

                                        随笔档案


                                    </h3>

                                    <ul>

                                        <li data-category-list-item-visible="true" style="display: block">

                                            <a href="https://www.cnblogs.com/rain-sparse/archive/2022/06.html"
                                                class="category-item-link" rel="" target="">2022年6月(5)</a>

                                        </li>
                                        <li data-category-list-item-visible="true" style="display: block">

                                            <a href="https://www.cnblogs.com/rain-sparse/archive/2022/02.html"
                                                class="category-item-link" rel="" target="">2022年2月(1)</a>

                                        </li>
                                        <li data-category-list-item-visible="true" style="display: block">

                                            <a href="https://www.cnblogs.com/rain-sparse/archive/2021/11.html"
                                                class="category-item-link" rel="" target="">2021年11月(5)</a>

                                        </li>
                                        <li data-category-list-item-visible="true" style="display: block">

                                            <a href="https://www.cnblogs.com/rain-sparse/archive/2021/10.html"
                                                class="category-item-link" rel="" target="">2021年10月(2)</a>

                                        </li>

                                    </ul>


                                </div>
                                <div id="sidebar_articlecategory" class="catListArticleCategory sidebar-block">
                                    <h3 class="catListTitle">

                                        <a class="sidebar-card-title-a"
                                            href="https://www.cnblogs.com/rain-sparse/categories">文章分类</a>



                                    </h3>

                                    <ul>

                                        <li data-category-list-item-visible="true" style="display: block">

                                            <a href="https://www.cnblogs.com/rain-sparse/category/2050853.html"
                                                class="category-item-link" rel="" target="">李清照(3)</a>

                                        </li>

                                    </ul>


                                </div>
                            </div>

                            <!-- 最新评论 -->
                            <!-- 阅读排行榜 -->
                            <div id="sidebar_topviewedposts" class="sidebar-block">
                                <div class="catListView">
                                    <h3 class="catListTitle">
                                        <a href="https://www.cnblogs.com/rain-sparse/most-viewed"
                                            class="sidebar-card-title-a">
                                            阅读排行榜
                                        </a>

                                    </h3>
                                    <div id="TopViewPostsBlock">
                                        <ul style="word-break:break-all">
                                            <li>
                                                <a href="https://www.cnblogs.com/rain-sparse/p/15902923.html">
                                                    1. Sass和Less(42)
                                                </a>
                                            </li>
                                            <li>
                                                <a href="https://www.cnblogs.com/rain-sparse/p/html.html">
                                                    2. HTML初识(26)
                                                </a>
                                            </li>
                                            <li>
                                                <a href="https://www.cnblogs.com/rain-sparse/p/vscode.html">
                                                    3. VS Code 插件(25)
                                                </a>
                                            </li>
                                            <li>
                                                <a href="https://www.cnblogs.com/rain-sparse/p/jsbasis.html">
                                                    4. JavaScript基础(21)
                                                </a>
                                            </li>
                                            <li>
                                                <a href="https://www.cnblogs.com/rain-sparse/p/css.html">
                                                    5. CSS基础(19)
                                                </a>
                                            </li>
                                            <li>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <!-- 评论排行榜 -->
                            <div id="sidebar_topcommentedposts" class="sidebar-block"></div>

                            <!-- 推荐排行榜 -->
                            <div id="sidebar_recentcomments" class="sidebar-block"></div>


                        </div>
                        <script>loadBlogSideColumn();</script>
                    </div>
                </div>
                <!--end: sideBarMain -->
            </div>
            <!--end: sideBar 侧边栏容器 -->
            <div class="clear"></div>
        </div>
        <!--end: main -->
        <div class="clear"></div>
        <div id="footer">
            <!--done-->
            Copyright © 2022 rain_sparse
            <br><span id="poweredby">Powered by .NET 6 on Kubernetes</span>



        </div>
        <!--end: footer -->
    </div>
    <!--end: home 自定义的最大容器 -->





    <input type="hidden" id="antiforgery_token"
        value="CfDJ8EOBBtWq0dNFoDS-ZHPSe53OaEyTWZTo5i45H71K3RvlpCLJbRYj1MCtAV-4_T22ovGXlhb44wT7T082WpOeLQa2nxW2ohtaDkMd-TPcXzN64hLKO2Awvd_C8EeADhKqhTmJTnt14LnAjRoLGzm3IHVrhgxrZ-6gGi4kifxHy_soXeTyTkx6UDKzmnkTTq3P9g">
    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-476124-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        var kv = getGACustom();
        if (kv) {
            gtag('set', kv);
        }
        gtag('config', 'UA-476124-1');
    </script>
    <script defer="" src="https://hm.baidu.com/hm.js?866c9be12d4a814454792b1fd0fed295"></script>
    <!-- 添加的js -->
    <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
    <script src="./js/index.js"></script>
    <script src="./js/article.js"></script>
</body>
<div style="all: initial;">
    <div id="__hcfy__" style="all: initial;"></div>
</div>

</html>